<template>
	<layout>
		<div class="top">
			<el-input v-model="key" placeholder=""></el-input>
			<el-button type="" @click="$router.push('/role/create')"
				v-if="$checkPermission(48)">新增角色</el-button
			>
		</div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="id" label="ID"> </el-table-column>
			<el-table-column prop="name" label="名称"> </el-table-column>
			<el-table-column style='width:150px;' label="操作" fixed="right">
				<template slot-scope="scope">
                <el-button
						size="small" type="text" 
						@click="$router.push('/role/permission/' + scope.row.id)"
						>权限</el-button
					>
					<el-button
						size="small" type="text" 
						@click="$router.push('/role/edit/' + scope.row.id)"
						>编辑</el-button
					>
					<el-button
						size="small" type="text" 
						@click="handleDelete(scope.$index, scope.row)"
						>删除</el-button
					>
				</template>
			</el-table-column>
		</el-table>
	</layout>
</template>  //轮播

<script>
export default {
	data() {
		return {
			tableData: [{}],
			key: '',
		}
	},
	created() {
		this.getData()
	},
	watch: {
		key(val) {
			this.getData()
		},
	},
	methods: {
		getData(){
      let path = '/role/select'
      if(this.key){
        path = `/role/select?key=${this.key}`
      }
      
      this.$http.get(path).then(res =>{
      if(res.errcode == 0){
        this.tableData = res.data
      }
    })
    },
		handleDelete(index, row) {
			this.$http
				.post('role/trash', {
					id: row.id,
				})
				.then((res) => {
					this.tableData.splice(index, 1)
				})
		},
	},
}
</script>

<style>
.top {
	display: flex;
	justify-content: space-between;
}
.el-input {
	width: 180px;
}
</style>
